<script lang="ts" setup>
  import DetailName from './Sub/Name.vue';
  import DetailStars from './Sub/Stars.vue';
  import DetailAddress from './Sub/Address.vue';
  import DetailPrice from './Sub/Price.vue';
  import DetailService from './Sub/Service.vue';

  interface IProps {
    name: string;
    score: string;
    address: string;
    price: number;
    service: Record<string, string>;
  }
  
  defineOptions({
    name: 'KtvDetail'
  });

  const props = withDefaults(defineProps<Partial<IProps>>(), {
    name: '',
    score: '',
    address: '',
    price: 0,
    service () {
      return {};
    },
  });
</script>

<template>
  <div class="ktv-detail">
    <detail-name :name="props.name" />
    <detail-stars :star-num="Number(props.score || 0) / 2" :score="props.score" />
    <detail-address :address="props.address" />
    <detail-price :price="props.price" />
    <detail-service :service="service" />
  </div>
</template>